<template>
  <div class="view">
    <!-- Step 1 创建容器 -->
    <div ref="container" id="container" style="width: 910px; height: 800px;"></div>
  </div>
</template>
<script>
// Step 2 准备数据
import { Graph, Cell, Shape } from '@antv/x6'
import datList from "./data.js"
export default {
  name: "x6line",
  data() {
    return {
      graph: null,
      LINE_HEIGHT: 24,
      NODE_WIDTH: 150,
      datList,
      cells: []
    }
  },
  created() {

  },
  mounted() {
    this.initGraph()
  },
  methods: {
    initGraph() {
      Graph.registerPortLayout(
        'erPortPosition',
        (portsPositionArgs) => {
          return portsPositionArgs.map((_, index) => {
            return {
              position: {
                x: 0,
                y: (index + 1) * this.LINE_HEIGHT,
              },
              angle: 0,
            }
          })
        },
        true,
      ),
        Graph.registerNode(
          'er-rect',
          {
            inherit: 'rect',
            markup: [
              {
                tagName: 'rect',
                selector: 'body',
              },
              {
                tagName: 'text',
                selector: 'label',
              },
            ],
            attrs: {
              rect: {
                strokeWidth: 1,
                stroke: '#5F95FF',
                fill: '#5F95FF',
              },
              label: {
                fontWeight: 'bold',
                fill: '#ffffff',
                fontSize: 12,
              },
            },
            ports: {
              groups: {
                list: {
                  markup: [
                    {
                      tagName: 'rect',
                      selector: 'portBody',
                    },
                    {
                      tagName: 'text',
                      selector: 'portNameLabel',
                    },
                    {
                      tagName: 'text',
                      selector: 'portTypeLabel',
                    },
                  ],
                  attrs: {
                    portBody: {
                      width: this.NODE_WIDTH,
                      height: this.LINE_HEIGHT,
                      strokeWidth: 1,
                      stroke: '#5F95FF',
                      fill: '#EFF4FF',
                      magnet: true,
                    },
                    portNameLabel: {
                      ref: 'portBody',
                      refX: 6,
                      refY: 6,
                      fontSize: 10,
                    },
                    portTypeLabel: {
                      ref: 'portBody',
                      refX: 95,
                      refY: 6,
                      fontSize: 10,
                    },
                  },
                  position: 'erPortPosition',
                },
              },
            },
          },
          true,
        ),
        this.graph = new Graph({
          container: window.document.getElementById('container'),
          connecting: {
            router: {
              name: 'er',
              args: {
                offset: 25,
                direction: 'H',
              },
            },
            createEdge() {
              return new Shape.Edge({
                attrs: {
                  line: {
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                  },
                },
              })
            },
          },
        }),
        this.datList.dataArr.forEach((item) => {
          if (item.shape === 'edge') {
            this.cells.push(this.graph.createEdge(item))
          }
          else {
            this.cells.push(this.graph.createNode(item))
          }
        })
      this.graph.resetCells(this.cells)
      this.graph.zoomToFit({ padding: 10, maxScale: 1 })
    }
  }
}
</script>
<style lang="less" scoped>
.view {
  height: 100%;
  width: 100%;
}
</style>

